@media (max-width: 1200px) {

    .flexslider {
        height:calc(100vw * 302 / 512 + 100px);
        margin: 0px auto;
        /*height: 300px;*/
        width: 100%;
        overflow: hidden;
        zoom: 1;
    }

        .flexslider .slides {
            position:relative;
            z-index:99;
        }
    

        .flexslider .slides li {
            float: left;
            width: 100vw;
            padding:0 15px;
        }

    .flex-direction-nav li {
        width: 40px;
        height: 40px;
        overflow: hidden;
        margin: -20px 0 0;
        display: block;
        position: absolute;
        top: 50%;
        z-index: 199;
    }

    .flex-direction-nav li a {
        width: 40px;
        height: 40px;
        overflow: hidden;
        line-height: 99em;
        display: block;
        z-index: 10;
        cursor: pointer;
        /*opacity: 0;
        filter: alpha(opacity=0);*/
        -webkit-transition: all .3s ease;
        border-radius: 35px;
    }

    .flex-direction-nav li.flex-next {
        right: 0;
    }

    .flex-direction-nav li.flex-next a {
        background: url(../images/ind_arrow-02.png) no-repeat;
        background-size: 40px 40px;
    }

    .flex-direction-nav li.flex-prev {
        left: 0;
    }

    .flex-direction-nav li.flex-prev a {
        background: url(../images/ind_arrow.png) no-repeat;
        background-size: 40px 40px;
        left: 0;
    }

    .flexslider:hover .flex-next {
        opacity: 0.8;
        filter: alpha(opacity=25);
    }

    .flexslider:hover .flex-prev {
        opacity: 0.8;
        filter: alpha(opacity=25);
    }

        .flexslider:hover .flex-next:hover,
        .flexslider:hover .flex-prev:hover {
            opacity: 1;
            filter: alpha(opacity=50);
        }

    .flex-control-nav {
        width: 100%;
        text-align: center;
    }

        .flex-control-nav li {
            margin: 0 2px;
            display: inline-block;
            zoom: 1;
            *display: inline;
        }

    .flex-control-paging li a {
        display: inline-block;
        width: 12px;
        height: 5px;
        margin: 0 1px;
        text-indent: -999px;
        border: 1px solid #aaa;
        border-radius: 4px;
        cursor: pointer;
        background-color: #fff;
    }

    .flex-control-paging li a.flex-active,
    .flex-control-paging li.active a {
        margin: 0 1px;
        width: 12px;
        height: 5px;
        border: 1px solid #1564ff;
        background-color: #1564ff;
    }


    .flexslider .slides a img {
        border-radius:5px;
        width: 100%;
        /*height: 700px;*/
        display: block;
    }

        #product_tabs .slides li {
            padding:0;
        }


    #product_tabs .slides a img {
        border-radius:0;
    }

    #proCtrl {
        position:absolute;
        width:100%;
        margin-top:-20px;
        z-index:199;
        top:50%;
    }
}

@media (min-width: 1200px) {

    .flexslider {
        margin: 0px auto;
        position: absolute;
        width: 1920px;
        height: 700px;
        overflow: hidden;
        margin-left: -960px;
        left: 50%;
        zoom: 1;
    }

        .flexslider .slides li {
            float: left;
            width: 1920px;
            height: 100%;
        }

    .flex-direction-nav a {
        width: 40px;
        height: 40px;
        line-height: 99em;
        overflow: hidden;
        margin: -20px 0 0;
        display: block;
        position: absolute;
        top: 50%;
        z-index: 10;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: all .3s ease;
        border-radius: 35px;
    }

    .flex-direction-nav .flex-next {
        background: url(../images/ind_arrow-02.png) no-repeat;
        background-size: 40px 40px;
        right: 395px;
    }

    .flex-direction-nav .flex-prev {
        background: url(../images/ind_arrow.png) no-repeat;
        background-size: 40px 40px;
        left: 395px;
    }

    .flexslider:hover .flex-next {
        opacity: 0.8;
        filter: alpha(opacity=25);
    }

    .flexslider:hover .flex-prev {
        opacity: 0.8;
        filter: alpha(opacity=25);
    }

        .flexslider:hover .flex-next:hover,
        .flexslider:hover .flex-prev:hover {
            opacity: 1;
            filter: alpha(opacity=50);
        }

    .flex-control-nav {
        width: 1920px;
        position: absolute;
        bottom: 10px;
        text-align: center;
    }

        .flex-control-nav li {
            margin: 0 2px;
            display: inline-block;
            zoom: 1;
            *display: inline;
        }

    .flex-control-paging li a {
        background: url(../images/dot.png) no-repeat 0 -16px;
        display: block;
        height: 16px;
        overflow: hidden;
        text-indent: -99em;
        width: 16px;
        cursor: pointer;
    }

        .flex-control-paging li a.flex-active,
        .flex-control-paging li.active a {
            background-position: 0 0;
        }

    .flexslider .slides a img {
        width: 1920px;
        height: 700px;
        display: block;
    }
}

@media (min-width: 1600px) {
    .flex-direction-nav .flex-next {
        right: 105px;
    }

    .flex-direction-nav .flex-prev {
        left: 105px;
    }
}